<template>
  <div>
    <div class="m-panel bg-w mh-pd">
      <div class="panel-content">
          <!-- slides -->
          <div class="m-sw" v-for="item in recentContacter" :key="item.id">
            <div class="flex sw-item" @click='toView(item.user_id)'>
              <div class="con-l">
                <div class="pic-box">
                  <img :src="item.portrait" alt="头像">
                </div>
              </div>
              <div class="con-r">
                <p class="con-name mui-ellipsis" :class="[item.gender == 1 ? 'boy' : 'girl']" v-text="item.nickname">用户名</p>
                <p class="con-rest">{{item.age}}岁|{{item.user_rank=='1' ? '高级会员' : '普通会员'}}</p>
              </div>
            </div>
          </div>
      </div>
      <div class="panel-head">
        <h4>颜值审核</h4>
      </div>
      <div class="panel-content">
        
      </div>
    </div>

  </div>
</template>

<script>
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import FriendList from '@/components/hn-list/friends-list';
  import {MH_API} from "@/api/api";
  export default {
    name: "my-friend",
    data () {
      return {
        swiperOptionFilt: {
          loop: false,
          slidesPerView: 3,
          slidesPerColumn: 3,
          spaceBetween: 15,
          slidesPerColumnFill : 'row'
        },
        recentContacter: [

        ],
        boy: 0,
        girl: 0
      }
    },
    computed: {
      swiper() {
        return this.$refs.recentContact.swiper
      }
    },
    components: {
      swiper,
      swiperSlide,
      FriendList
    },
    methods: {
      toMeet(id){
        console.log(id)
        this.$router.push({
          path: '/meet/detail',
          query: {
            id: id,
            type: 2 //红娘端进入
          }
        })
      },
      toView(id){
        this.$router.push({
          path: '/review/friends',
          query: {
            id: id
          }
        })
      },
      getData(){
        let self = this;
        MH_API.getUserList({

        }).then(res => {
          //let newArr = res.data;
          // for(let i=0,len=newArr.length;i<len;i++){
          //   if(newArr[i].gender==1){
          //     self.boy = self.boy + 1;
          //   }
          //   else{
          //     self.girl = self.girl + 1;
          //   }
          // }
          self.recentContacter = res.data;
        })
      },
    },
    created(){
      this.getData();
      //颜值审核列表
      let self = this;
      MH_API.getScoring({

      }).then(res => {

      })
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .pic-box {
    background-color: #eee;
    width:6rem; height:6rem; border-radius:50%; overflow:hidden; margin-right:1rem;
  }
  .pic-box img{ width:100%; height:100%;}
  .panel-head {
    h4,h4>span {
      @include sc(1.5rem, #333);
      font-weight: bold;
    }
  }
  .panel-content {margin-top: .5rem; display:block;overflow:hidden;}
  .con-rest {position: relative;@include sc(1.2rem, #999)}
  .con-name {position: relative;@include sc(1.3rem, #333)}
  .panel-content .m-sw {margin-right: 0;}
  .m-sw { float:left; width: 50%!important;margin-right: 0!important; margin-bottom:1rem;}
  .boy:after,.girl:after {
    display: inline-block;
    width: 1.15rem;
    height: 1.15rem;
    margin-left: .4rem;
    content: '';
    vertical-align: middle;
  }
  .boy:after {
    background: url("../../assets/images/hnico/ic_boy.png") no-repeat center center;
    background-size: 100% 100%;
  }
  .girl:after {
    background: url("../../assets/images/hnico/ic_girl.png") no-repeat center center;
    background-size: 100% 100%;
  }
</style>
